<!--
 * @FileDescription 阿波罗
 * @Author lz
 * @Date 20230314 10:06:16
 * @LastEditors lz
 * @LastEditTime 20230314 10:06:16
-->
<template>
    <div class="browser_wp"
        :class="HomeContent.Default.REMBack.value > 0 && HomeContent.Default.conTypes.value == true ? 'new_bg_wp ' : ''">
        <!-- 可选按钮 -->
        <img src="/apoImg/ic_daima.png" class="ic_daima_2" @click="getInto()"
            v-show="HomeContent.Default.UBANTUVal.value != 1">
        <span class="CMD" v-show="HomeContent.Default.UBANTUVal.value != 1">Terminal</span>
        <!-- 顶部 -->
        <headers></headers>
        <!-- 侧边栏 -->
        <sidebar></sidebar>
        <!-- 内容部分 -->
        <!-- 浏览器 -->
        <contentBox v-show="HomeContent.Default.conTypes.value == true">
        </contentBox>
        <!-- <contentBox></contentBox> -->
        <div v-if="HomeContent.Default.Boxerror.value == true" class="Box404">
            <img src="/apoImg/404.jpeg" class="img404">
        </div>
        <!-- 终端 -->
        <Terminal v-show="HomeContent.Default.UBANTUVal.value == 2"></Terminal>
        <!-- <Terminal ></Terminal> -->

    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, Ref, watch } from 'vue'
import headers from './module/header.vue'
import sidebar from './module/sidebar.vue'
import contentBox from './module/contentBox.vue'
import Terminal from '/src/components/Apps/Simulation/Terminal/index.vue'
import HomeContent from '../HomeContent'
import { ClientMessage } from '@runtime/generate/message/ClientMessage'
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent'
const state = reactive({
    conTypes: false,
    Box404: false,
});
async function getInto() {
    HomeContent.Default.UBANTUVal.value = 2
    //启动终端
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackStartRequest(true))
}
//监听显示参数
watch(() => HomeContent.Default.InputContent.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        if (newVal == true && HomeContent.Default.UBANTUType.value == 1) {
            HomeContent.Default.conTypes.value = true
            HomeContent.Default.Boxerror.value = false
        } else {
            HomeContent.Default.Boxerror.value = true
            HomeContent.Default.conTypes.value = false
        }
    }
})
//监听显示参数
watch(() => HomeContent.Default.UBANTUVal.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        console.log(HomeContent.Default.UBANTUVal.value);
        if (HomeContent.Default.UBANTUVal.value == 1) {
            if (HomeContent.Default.UBANTUType.value == 1 && HomeContent.Default.InputContent.value == true) {
                HomeContent.Default.conTypes.value = true
                HomeContent.Default.Boxerror.value = false
            } else {
                HomeContent.Default.conTypes.value = false
                HomeContent.Default.Boxerror.value = true
            }
        } else {
            HomeContent.Default.Boxerror.value = false
            HomeContent.Default.conTypes.value = false
        }
    }
})
</script>

<style scoped>
.browser_wp {
    width: 100%;
    height: 100%;
    background-image: url('/apoImg/UBT_bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.new_bg_wp {
    width: 100%;
    height: 100%;
    background-image: none;
}

.ic_daima_2 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 45px;
    height: 38px;
    transform: translate(-50%, -50%);
}

.CMD {
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, 0);
    font-weight: 600;
}

.Box404 {
    position: absolute;
    right: 0;
    top: 111px;
    width: 1853px;
    height: 100%;
    background-color: #fff;
}

.img404 {
    width: 700px;
    height: 434px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}
</style>